<template>
  <div>
    <!-- {{searchResult}} -->
    <nav-bar title="搜索结果" />
    <!-- <div :class="loading"> -->
    <van-loading v-if="articlelistloading" />
    <!-- </div> -->
    <van-empty
      v-else-if="!searchResult"
      image="error"
      description="请求错误"
    />
    <van-empty
      v-else-if="!searchResult.length"
      description="暂无数据"
    />
    <article-list v-else :data="searchResult" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'SearchResult',

  data() {
    return {
      // loading: 'loading-star',
      articlelistloading: false,
    };
  },
  computed: {
    ...mapState('search', [
      'searchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updatesearchResult'

    ])
  },
  async created() {
    // 路由实例
    // console.log(this.$router);
    // 当前路由信息
    // console.log(this.$route.query.q);
    // 请求当前设置loading
    this.articlelistloading = true;
    await this.updatesearchResult(this.$route.query.q);
    this.articlelistloading = false;
  },
  // updated() {
  //   this.loading = 'loading-end';
  // },
}
</script>

<style lang="less" scoped>
// .war {

//    height: calc(100% - 44px);
//   overflow: auto;
// }

.loading-star {
  text-align: center;
}

.loading-end {
  display: none;
  // visibility: hidden;
}
</style>
